<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《石钟山记》模拟练习 - 语文古诗文学习系统</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/shizhongshan.css">
</head>
<body>
    <div class="container">
        <!-- 练习布局 -->
        <div id="practice-layout" class="practice-layout">
            <!-- 左侧文章面板 -->
            <div class="practice-article-panel">
                <div class="article-header-inline">
                    <div class="article-title-inline">
                        <h2>《石钟山记》</h2>
                        <div class="article-author-inline">苏轼 · 宋</div>
                    </div>
                    <button class="back-btn" onclick="goBack()">← 返回</button>
                </div>
                <div class="article-content-inline" id="article-content">
                    <!-- 文章内容将通过JavaScript加载 -->
                </div>
            </div>
            
            <!-- 右侧题目面板 -->
            <div class="practice-question-panel">
                <div class="question-header">
                    <div class="question-progress">
                        <div class="progress-info">
                            <span id="current-question">1</span> / <span id="total-questions">11</span>
                        </div>
                    </div>
                    <div class="timer-display" id="timer-display">20:00</div>
                </div>
                
                <div class="question-content">
                    <div class="question-text" id="question-text">
                        <!-- 题目内容 -->
                    </div>
                    
                    <!-- 选择题选项 -->
                    <div class="question-options" id="question-options">
                        <!-- 选项将通过JavaScript动态生成 -->
                    </div>
                    
                    <!-- 翻译题 -->
                    <div class="translation-question hidden" id="translation-question">
                        <div class="translation-text" id="translation-text">
                            <!-- 翻译题目 -->
                        </div>
                        <div class="translation-answer" id="translation-answer">
                            <h4>参考答案：</h4>
                            <p id="translation-answer-text"></p>
                            <p><strong>解析：</strong><span id="translation-explanation"></span></p>
                        </div>
                    </div>
                </div>
                
                <div class="question-actions">
                    <button class="question-nav-btn" id="prev-btn" onclick="prevQuestion()" disabled>上一题</button>
                    <button class="question-nav-btn next" id="next-btn" onclick="nextQuestion()" disabled>下一题</button>
                    <button class="question-nav-btn submit" id="submit-test-btn" onclick="submitPaper()" style="display: none;">提交测试</button>
                </div>
            </div>
        </div>
        
        <!-- 结果页面 -->
        <div id="practice-result" class="practice-result hidden">
            <h2>练习完成！</h2>
            <div class="score-display">
                <div class="score-circle">
                    <span id="score-percentage">0%</span>
                </div>
                <p>你的总分：<span id="total-score">0</span> / <span id="max-score">0</span> 分</p>
                <p>选择题：<span id="choice-score">0</span> / <span id="choice-max">0</span> 分</p>
                <p>翻译题：<span id="translation-score">0</span> / <span id="translation-max">0</span> 分</p>
            </div>
            
            <div class="result-details" id="result-details">
                <!-- 详细结果将通过JavaScript生成 -->
            </div>
            
            <div class="result-actions">
                <button class="retry-btn" onclick="retryTest()">重新练习</button>
                <button class="back-btn" onclick="goBack()">返回</button>
                <button class="home-btn" onclick="goHome()">返回主页</button>
            </div>
        </div>
    </div>

    <script src="../js/shizhongshan.js"></script>
</body>
</html> 